<!-- 可视化-双碳 -->
<template>
  <div class="common_list_container">
    <px-form ref="formRef" :model="queryParams" :inline="true" class="search-form">
      <px-form-item label="位置信息" prop="positionCode">
        <px-cascader
          ref="cascaderRef"
          v-model="queryParams.facCode"
          filterable
          clearable
          style="width: 300"
          :options="positionCodesList"
          :props="cascaderProps"
          placeholder="请选择位置信息"
          @change="changeCheckArea"
        />
      </px-form-item>
      <px-form-item label="数据来源" prop="dataSource">
        <px-select v-model="queryParams.dataSource" placeholder="数据来源">
          <px-option v-for="item in dataSources" :key="item" :label="item" :value="item" />
        </px-select>
      </px-form-item>
      <div class="search-form-btn">
        <px-button type="primary" @click="handleQuery">查询</px-button>
        <px-button @click="resetQuery">重置</px-button>
      </div>
    </px-form>
    <div class="mb-[10px]">
      <px-button v-has="'VISUAL_DOUBLE_CARBON_ADD'" type="primary" @click="handleAdd">新增</px-button>
    </div>
    <px-table :data="tableData" height="calc(100vh - 309px)" border>
      <px-table-column prop="year" label="厂区" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.pathName.split("/")[0] }}
        </template>
      </px-table-column>
      <px-table-column prop="cycle" label="建筑" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.pathName.split("/")[1] }}
        </template>
      </px-table-column>
      <px-table-column prop="production" label="楼层" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.pathName.split("/")[2] }}
        </template>
      </px-table-column>
      <px-table-column prop="room" label="房间" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.pathName.split("/")[3] }}
        </template>
      </px-table-column>
      <px-table-column prop="dataSource" label="数据来源" min-width="120" show-overflow-tooltip />
      <px-table-column prop="dataContent" label="数据内容" min-width="120">
        <template #default="scope">
          <px-tooltip :content="scope.row.dataContent.map(e => e.facilityName).join(',')" :append-to="_HTMLDOM">
            <div class="cell px-tooltip">{{ scope.row.dataContent.map(e => e.facilityName).join(",") }}</div>
          </px-tooltip>
        </template>
      </px-table-column>
      <px-table-column prop="updateTime" label="修改时间" min-width="120" show-overflow-tooltip />
      <px-table-column prop="updateByName" label="修改人" min-width="120" show-overflow-tooltip />
      <px-table-column label="操作" width="150" fixed="right" align="center">
        <template #default="scope">
          <px-tooltip content="编辑" placement="top">
            <px-button v-has="'VISUAL_DOUBLE_CARBON_EDIT'" link icon="EditPen" type="primary" @click="handleEdit(scope.row)" />
          </px-tooltip>
          <px-tooltip content="删除" placement="top">
            <px-button v-has="'VISUAL_DOUBLE_CARBON_DELETE'" link icon="Delete" type="danger" @click="handleDelete(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <pagination
      v-show="queryParams.total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      class="common_page"
      :total="queryParams.total"
      @pagination="handleQuery"
    />
    <AddEditDialog v-if="isShowAddEditDialog" v-model="isShowAddEditDialog" :option="addEditOpt" @submit="handleQuery" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import AddEditDialog from "./components/addEditDialog.vue";
import { deleteDigitaltwinsConfig, getDataSource, queryDigitaltwinsConfig } from "@/api/doubleCarbonManage/carbonAccounting";
import { PxMessage, PxMessageBox } from "px-ui";
import { queryVisualTree } from "@/api/visual/visualConfig";
const _HTMLDOM = document.documentElement;
defineOptions({
  name: "VISUAL_DOUBLE_CARBON"
});
const formRef = ref();

const cascaderRef = ref();
const queryParams = reactive({
  facCode: "",
  path: "",
  dataSource: "双碳",
  total: 0,
  pageNum: 1,
  pageSize: 20
});
const positionCodesList = ref<any>([]);
const cascaderProps = {
  children: "children",
  label: "name",
  value: "id",
  checkStrictly: true
};
// 获取巡检区域
const focusPositionCodes = async () => {
  const facCode = localStorage.getItem("facCode");
  const data = await queryVisualTree({ facCode, needEqp: false, containMonitor: false });
  positionCodesList.value = data || [];
};

// 巡检区域改变
const changeCheckArea = val => {
  queryParams.facCode = val && val.length > 0 ? val[val.length - 1] : "";
  cascaderRef.value.togglePopperVisible();
  const checkedNodes = cascaderRef.value.getCheckedNodes();
  if (checkedNodes.length >= 0) {
    queryParams.path = checkedNodes[0].data.path;
  }
};
const dataSources = [
  "双碳"
  // "能源" // 暂时无
];
// const getDataSourcesFun = async () => {
//   const res = await getDataSource();
//   console.log(`output->res`, res);
// };
onMounted(() => {
  // getDataSourcesFun(); 暂时写死 用不到
  focusPositionCodes();
  getTableList();
});

const handleQuery = () => {
  getTableList();
};
const resetQuery = () => {
  queryParams.facCode = "";
  queryParams.path = "";
  queryParams.dataSource = "双碳";
  queryParams.pageNum = 1;
  queryParams.total = 0;
  queryParams.pageSize = 20;
  getTableList();
};
const handleEdit = (row: any) => {
  isShowAddEditDialog.value = true;
  addEditOpt.value = { title: "设施/活动信息", type: "edit", positionCodesList: positionCodesList.value, data: row };
};
const handleDelete = (row: any) => {
  PxMessageBox.confirm(`删除后不可恢复，继续删除吗？`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await deleteDigitaltwinsConfig(row.id);
      PxMessage.success("删除成功");
      getTableList();
    })
    .catch(() => {});
};

const tableData = ref([]);
// 获取列表的数据
const getTableList = async () => {
  const params = {
    facCode: queryParams.facCode,
    path: queryParams.path,
    dataSource: queryParams.dataSource,
    pageNum: queryParams.pageNum,
    pageSize: queryParams.pageSize
  };
  const res: any = await queryDigitaltwinsConfig(params);
  tableData.value = res.data;
  queryParams.pageNum = res.pageNum;
  queryParams.total = res.total;
};

const isShowAddEditDialog = ref(false);
const addEditOpt = ref<any>(null);
// 新增
const handleAdd = async () => {
  isShowAddEditDialog.value = true;
  addEditOpt.value = { title: "设施/活动信息", type: "add", positionCodesList: positionCodesList.value };
};
</script>

<style lang="scss" scoped>
.search-form {
  display: flex;
  align-items: center;

  .search-form-btn {
    margin-bottom: 16px;
  }
}

.common_list_container {
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;

  .common_page {
    height: 33px;
    padding: 0 !important;
    margin-top: 25px;
    margin-bottom: 0;
  }
}

:deep(.px-table .px-table__header-wrapper th, .px-table .px-table__fixed-header-wrapper th) {
  font-size: 14px !important;
}

.add-form-wrap {
  display: flex;
  justify-content: center;
}
</style>
